@charset "utf-8";

p{
	width: 200px;
	border: 1px solid gray;
	background-color: silver;
	margin: 5px;
	padding: 5px;
}

div{
	/* 设置弹性，将容器盒模型作为块级弹性伸缩盒显示（混合版本） */
	display: -moz-flexbox;
	display: -webkit-flexbox;
	display: flexbox;

	/* 设置弹性，将容器盒模型作为内联级弹性伸缩盒显示（混合版本） */
	/*display: -moz-inline-flexbox;
	display: -webkit-inline-flexbox;
	display: -ms-inline-flexbox;
	display: inline-flexbox;*/
}

/************************* flex-direction *************************/
div{
	/* 设置从左到右排列 */
	/*flex-direction: row;*/

	/* 设置从右到左排列 */
	/*flex-direction: row-reverse;*/

	/* 设置从上到下排列 */
	/*flex-direction: column;*/

	/* 设置从下到上排列 */
	/*flex-direction: column-reverse;*/
}

/************************* flex-wrap *************************/
div{
	/* 默认值，都在一行或一列显示 */
	/*flex-wrap: nowrap;*/

	/* 伸缩项目无法容纳时，自动换行 */
	/*flex-wrap: wrap;*/

	/* 伸缩项目无法容纳时，自动换行，方向和 wrap 相反 */
	/*flex-wrap: wrap-reverse;*/	
}

/************************* flex-flow *************************/
div{
	/* 简写形式 */
	/*flex-flow: row wrap;*/
}

/************************* flex-pack *************************/
div{
	/* 伸伸缩项目以起始点靠齐 */
	/*flex-pack: start;*/

	/* 伸缩项目以结束点靠齐 */
	/*flex-pack: end;*/

	/* 伸缩项目以中心点靠齐 */
	/*flex-pack: center;*/

	/* 伸缩项目平均分布 */
	/*flex-pack: justify;*/
}

/************************* flex-align *************************/
div{
	/* 伸缩项目以顶部为基准，清理下部额外空间 */
	/*flex-aign:start;*/

	/* 伸缩项目以底部为基准，清理上部额外空间 */
	/*flex-aign:end;*/

	/* 伸缩项目以中部为基准，平均清理上下部额外空间 */
	/*flex-aign:center;*/

	/* 伸缩项目以基线为基准，清理额外空间 */
	/*flex-aign:baseline;*/

	/* 伸缩项目填充整个容器，默认 */
	/*flex-aign:stretch;*/
}

/************************* flex *************************/
p:first-child{
	flex: 1;
}

p:nth-child(2){
	flex: 3;
}

p:last-child{
	flex: 1;
}

/************************* flex-order *************************/
p:first-child{
	flex-order: 2;
}
